Designing Form Templates For Use On A Mobile Device

  • Article

Similar in functionality to how InfoPath Forms Services renders browser-enabled form templates in a typical desktop Web browser, InfoPath Forms Services also renders forms in browsers on handheld, or mobile, devices. Most mobile devices are supported, including PDAs (Personal Digital Assistants), smart phones, and any device that supports a Web browser with HTML, cHTML and xHTML; WAP is not supported. There are, however, some key differences in how forms are rendered in a mobile browser and considerations to keep in mind when designing a form template for use on a mobile device.

Rendering Differences

There are some differences in how forms are rendered in a mobile browser that should be taken into account when designing for a mobile device:

  • ASP.NET mobile controls are used in place of the standard ASP.NET controls used in desktop browser rendering.

  • In the mobile form there will be functional fidelity with the desktop browser-enabled form. Due to the form factor and lack of support for some browser technologies like HTML tables and CSS (Cascading Style Sheets), visual fidelity is not preserved.

  • The mobile rendering service of InfoPath Forms Services is located at _layouts\Mobile\MobileFormServer.aspx.

  • A form rendered by FormServer.aspx in a desktop browser includes local, non-modifiable scripts which perform simple tasks in the browser form to reduce communication with the server. Because most mobile devices do not support client-side scripting, mobile forms communicate with the server more often, requiring more round trips to the server to handle form functions like data validation, rules, and calculations.

  • A subset of controls that are supported in a desktop browser-enabled form template are supported on a mobile device. The supported controls include:

    • Text Box

    • List Box

    • Check Box

    • Drop-Down List Box

    • Repeating Section

    • Expression Box

    • Date Picker (rendered as a Text Box with date validation)

    • Buttons, including the Submit Button

    Important   Mobile controls will render differently than in a desktop browser. As a general rule, a control that is supported by ASP.NET mobile controls will render in a browser-enabled form properly on supported devices. For a list of devices tested with the ASP.NET mobile controls, see ASP.NET Mobile Control and Microsoft Mobile Internet Toolkit Tested Devices.

  • InfoPath Forms Services controls that not supported and are ignored when rendered in the mobile Web browser include:

    • Rich Text Box

    • Option Button (use a drop-down list box)

    • Section

    • Optional Section (use multiple views)

    • Repeating Table (use repeating sections)

    • Hyperlink

    • File Attachment

    • Digital signatures

  • Mobile InfoPath forms support the same business logic, rules, validation, and calculations that are allowed on all other InfoPath forms. However, a mobile device user is required to force a postback using the Update button on the mobile device toolbar each time they need to trigger such logic. Alternatively, you may insert a button into your mobile form that causes a postback. Designing a mobile form with multiple views to display conditional controls, rather than putting all controls on a single view, is recommended. Using this approach will keep a single view from becoming difficult to use on small form-factor mobile devices. Additionally, adding buttons to navigate between logically connected views and hiding the view drop-down in the user interface will provide an optimal mobile experience.

Design Considerations

Differences

Designing forms for a mobile device is different than designing a form for use in a desktop browser. For example, the option for rendering on a mobile device needs to be explicitly set. This option is located in the Form Options dialog box, which is accessed by clicking the Tools menu when designing a form and choosing Form Options. Click the Browser category and select Enable rendering on a mobile device. When the form template is deployed to a server running InfoPath Forms Services it will be converted into a format compatible with both desktop and mobile Web browsers.

Note

Enabling a form template to be rendered by InfoPath Forms Services requires that it be deployed by an Administrator of the server. For more information about this process, see Developing and Deploying Form Templates for InfoPath Forms Services.

Screen sizes are smaller on mobile devices and vary according to the device, so the form will look smaller and may be split into multiple pages or views. The form may also look substantially different from mobile device to mobile device.

Overall functionality of the form will be the same, but certain controls and procedures, such as requiring the user to press the Update button to cause a postback to the server, may be different depending on the mobile device used to open the form and how controls are rendered for that device.

Consistencies

There are, however, many consistencies with desktop browsers when designing forms for a mobile device. For example, the form invocation model, including the support of query parameters, is the same for FormServer.aspx and MobileFormServer.aspx. Regular form server URLs work on mobile devices because they are redirected to the MobileFormServer.aspx if a mobile browser is detected.

The majority of views designed in the InfoPath design UI (User Interface) will work on mobile devices without modification if the use of unsupported controls is avoided. However, because these controls will be ignored, there may not be any need to modify an existing view.

Lastly, the functionality of custom business logic, rules, data connections and data validation is the same as in a browser-enabled form rendered in a desktop browser.

See Also

Concepts

How to: Use Query Parameters to Invoke Browser-Enabled InfoPath Forms
Design-Once Feature Compatibility